<script setup lang="ts">
import HeaderView from '../components/HeaderView.vue'
import FooterView from '../components/FooterView.vue'
</script>

<template>

  <HeaderView />

  <div class="container-container-pr">

    <h1>Site Map</h1>

    <div class="container-container-pr-cc">

            <dl v-for="(item, idx) in useConfig().tree" :key="idx">
              <dt class="fw700"><router-link :to="'/lists/' + item.id">{{item.title}}</router-link></dt>
              <dd>
                <router-link :to="'/lists/' + it.id"  v-for="it in item.children" :key="it.id">{{it.title}}</router-link>
              </dd>
            </dl>

            <!-- <dl>
              <dt class="fw700"><router-link to="/Clothing">Shoes and bags</router-link></dt>
              <dd>
                <router-link to="/Clothing">Sports shoes</router-link>
                <router-link to="/Clothing">Running shoes</router-link>
                <router-link to="/Clothing">Bags</router-link>
              </dd>
            </dl>

            <dl>
              <dt class="fw700"><router-link to="/Clothing">Digital</router-link></dt>
              <dd>
                <router-link to="/Clothing">Cell phones</router-link>
                <router-link to="/Clothing">Computers</router-link>
                <router-link to="/Clothing">Smart Devices</router-link>
              </dd>
            </dl>

            <dl>
              <dt class="fw700"><router-link to="/Clothing">Home</router-link></dt>
              <dd>
                <router-link to="/Clothing">Furniture</router-link>
                <router-link to="/Clothing">Home Appliances</router-link>
                <router-link to="/Clothing">Home Textiles</router-link>
              </dd>
            </dl>

            <dl>
              <dt class="fw700"><router-link to="/Clothing">Beauty</router-link></dt>
              <dd>
                <router-link to="/Clothing">Skin Care</router-link>
                <router-link to="/Clothing">Color Cosmetics</router-link>
                <router-link to="/Clothing">Fragrance</router-link>
                <router-link to="/Clothing">Cleansing</router-link>
              </dd>
            </dl>

            <dl>
              <dt class="fw700"><router-link to="/Clothing">Automotive</router-link></dt>
              <dd>
                <router-link to="/Clothing">Car accessories</router-link>
                <router-link to="/Clothing">Car Appliances</router-link>
                <router-link to="/Clothing">Repair Tools</router-link>
                <router-link to="/Clothing">Cleansing</router-link>
              </dd>
            </dl> -->


    </div>

  </div>

  <FooterView class="footer" />

</template>

<script lang="ts">
import { useConfig } from '../stores/config'


export default {
  data() {
    return {
      pageTitle: 'Site Map'
    };
  },
  created() {
    this.updateTitle();
  },
  methods: {
    updateTitle() {
      document.title = this.pageTitle; // 或者根据需要动态设置标题
    }
  }

}
</script>

<style>
.container-container-pr {
  max-width: 1000px;
  min-width: 1000px;
  padding: 0 5%;
  margin: 130px auto 0 auto;
  min-height: 500px;
  h1 {
    font-size: 22px;
    text-align: center;
  }
  .container-container-pr-cc {
    padding: 30px 0 50px 0;
    dl {
      border-bottom: 1px solid #f1f1f1;
      padding: 20px;
      dt {
        padding-bottom: 10px;
      }
    }
    a {
    padding: 0 20px 0 0 ;
    }
    a:hover {
        background-image: linear-gradient(to right, #f41cb2, #f25511) !important;
        -webkit-background-clip: text !important;
        color: transparent !important;
      }
  }


  }
@media only screen and (max-width: 1000px) {
  .container-container-pr {
    margin-top: 90px;
    max-width: 100%;
    min-width: 100%;
    .container-container-pr-cc {
      padding: 30px 0;
      a {
        display: inline-block;
        white-space:wrap;
      }
    }
  }

  .footer {
    display: none;
  }
}
</style>
